<template>
  <div class="knowledge-main">
      <el-scrollbar height="calc(100vh - 60px)">
        <div class="knowledge-main-container">
            <div class="knowledge-title">
                <img style="width: 27px; position: relative; top: 10px;" src="../../assets/img/shop/cat-header3.png">
                喂养知识
            </div>
            <div class="knowledge-body">
                <el-collapse accordion>
                    <el-collapse-item v-for="(item, index) in knowledges" :title="item.title" :name="index" :key="index">
                        <div v-html="item.detail"></div>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </div>
      </el-scrollbar>
  </div>
</template>

<script>
import { knowledges } from '../../assets/js/shop/knowledges.js'

export default {
    data() {
        return {
            knowledges: knowledges
        }
    },
    beforeMount() {
        this.$store.dispatch('changeShopBreadcrumb', [{ path: '/shop', name: '首页' }, { name: "猫咪知识" }]);
    }
}
</script>

<style lang="less" scoped>
    @import url('../../assets/less/common.less');

    .icon-color {
        color: @theme-color !important;
    }

    .icon-size-big {
        font-size: 24px;
    }

    .knowledge-main {
        .knowledge-main-container {
            margin: 30px 70px 30px;
            .knowledge-title {
                font-family: 'catfont';
                font-size: 30px;
            }
            .knowledge-body {
                width: calc(65vw);
                margin-top: 20px;
                .el-collapse-item__header {
                    border-top: 1px solid @theme-color;
                    border-bottom: 1px solid @theme-color;
                }
            }
        }
    }
</style>